<template>
    <div v-if="!loading" class="container">
        <div v-if="isSuccess" class="port-name">{{ info.stationName }}</div>
        <div v-if="isSuccess" class="info" @click="toDetail(orderNo)">
            <div class="info-item">
                <div class="info-value">
                    {{ info.scanCharge ? "扫码充电" : "实体卡充电" }}
                </div>
                <div class="info-text">充电方式</div>
            </div>
            <div class="divider"></div>
            <template v-if="balance || balance === 0">
                <div class="info-item">
                    <div class="info-value">
                        <span>{{ balance || balance === 0 ? (balance / 100).toFixed(2) : "-" }}</span>
                        元
                    </div>
                    <div class="info-text">钱包余额</div>
                </div>
                <div class="divider"></div>
            </template>
            <div class="info-item">
                <div class="info-value">
                    <span>{{ info.port }}</span>
                    号口
                </div>
                <div class="info-text">充电口</div>
            </div>
            <div class="divider"></div>
            <div class="info-item">
                <div class="info-value">
                    <span>{{ info.payAmount || info.payAmount === 0 ? (info.payAmount / 100).toFixed(2) : "-" }}</span>
                    元
                </div>
                <div class="info-text">支付费用</div>
            </div>
        </div>
        <img v-if="isSuccess" class="result-icon" :src="imgs.paySuccess" alt="" />
        <img v-else class="result-icon" :src="imgs.payFail" alt="" />
        <div class="result-text">{{ isSuccess ? "支付成功" : "支付失败" }}</div>
        <div class="btn" @click="back">返回首页</div>
    </div>
</template>
<script>
import { checkOrderResultAPI, getOrderDetailAPI, getBalanceAPI } from "../src/api/api";
const app = getApp();
export default {
    data() {
        return {
            isWx: app.globalData.isWx,
            imgs: app.globalData.imgs,
            orderNo: "",
            times: 0,
            loading: false,
            isSuccess: false,
            info: {},
            balance: "",
        };
    },
    onShareAppMessage() {},
    onLoad(options) {
        this.orderNo = options.orderNo;

        uni.showLoading({
            title: "查询中",
        });
        this.loading = true;
        this.checkOrderResult();
    },
    methods: {
        checkOrderResult() {
            this.times++;
            checkOrderResultAPI({
                orderNo: this.orderNo,
            })
                .then((res) => {
                    this.loading = false;
                    this.isSuccess = true;
                    uni.hideLoading();

                    this.getOrderDetail();
                })
                .catch((err) => {
                    // 轮询
                    if (this.times < 5) {
                        setTimeout(() => {
                            this.checkOrderResult();
                        }, 1000);
                    }
                    // 超过5次为失败
                    else {
                        this.loading = false;
                        this.isSuccess = false;
                        uni.hideLoading();
                    }
                });
        },
        // 查询订单详情
        getOrderDetail() {
            getOrderDetailAPI({ orderNo: this.orderNo }).then((res) => {
                this.info = res || {};
            });
        },
        // 查询余额
        getBalance() {
            getBalanceAPI().then((res) => {
                this.balance = res.balance;
            });
        },
        toDetail(orderNo) {
            uni.navigateTo({
                url: `/pages/order_detail?orderNo=${orderNo}`,
            });
        },
        back() {
            if (this.isSuccess) {
                let tmplIds = this.isWx ? ["DufXCOTFP2XtiqFlMdIa2VdsvLMeYgf9U_iuSY4CI6U", "QcdoSsLKOXJx36E48B7Z_CGSoomqcUJGNP9xZvJmtXo"] : ["d0caac0c953f4d43b453a40be190ec21", "8d4c4753f1574ce7a7e209c01330126a"];
                app.showMessageToast(tmplIds, () => {
                    uni.switchTab({
                        url: "/pages/order",
                    });
                });
            } else {
                uni.switchTab({
                    url: "/pages/index",
                });
            }
        },
    },
};
</script>
<style scoped lang="less">
.container {
    padding-top: 20rpx;
    .port-name {
        padding-left: 40rpx;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 24rpx;
    }
    .info {
        width: 694rpx;
        height: 166rpx;
        display: flex;
        align-items: center;
        background-color: #f6f6f6;
        border-radius: 24rpx;
        margin: 0 auto;
        .divider {
            flex: none;
            width: 1rpx;
            height: 40rpx;
            background-color: #cbcbcb;
        }
        .info-item {
            flex: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
            color: #333;
            .info-value {
                margin-bottom: 8rpx;
                display: flex;
                align-items: center;
                height: 36rpx;
                span {
                    font-size: 36rpx;
                    font-weight: bold;
                    margin-right: 4rpx;
                    margin-top: -4rpx;
                }
            }
            .info-text {
                color: #9a9a9a;
            }
        }
    }
    .result-icon {
        display: block;
        width: 150rpx;
        height: 150rpx;
        margin: 100rpx auto 20rpx;
    }
    .result-text {
        color: #9a9a9a;
        text-align: center;
    }
    .btn {
        position: absolute;
        bottom: 100rpx;
        left: 275rpx;
        display: block;
        opacity: 0.8;
        background-color: #08bfa8;
        color: #fff;
        width: 200rpx;
        height: 70rpx;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        line-height: 1;
    }
}
</style>
